<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>ol6加载百度在线地图</title>
    <script src='../lib/projzh/index.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/ol@v7.2.2/dist/ol.js'></script>
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/ol@v7.2.2/ol.css'>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #map {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
</head>
<body>
<div id='map'></div>
</body>
<script>
	const bd09Extent = [-20037726.37, -12474104.17, 20037726.37, 16474104.17];
	const baiduMercator = new ol.proj.Projection({
		code: 'baidu',
		extent: bd09Extent,
		units: 'm'
	});
	ol.proj.addProjection(baiduMercator);
	ol.proj.addCoordinateTransforms('EPSG:4326', baiduMercator, projzh.ll2bmerc, projzh.bmerc2ll);
	ol.proj.addCoordinateTransforms('EPSG:3857', baiduMercator, projzh.smerc2bmerc, projzh.bmerc2smerc);
	const bmercResolutions = new Array(19);
	for (let i = 0; i < 19; ++i) {
		bmercResolutions[i] = Math.pow(2, 18 - i);
	}
	const baiduSource = new ol.source.XYZ({
		projection: 'baidu',
		wrapX: true,
		url: '',
		tileGrid: new ol.tilegrid.TileGrid({
			origin: [0, 0],
			resolutions: bmercResolutions,
			tileSize: 256,
			extent: bd09Extent
		}),
		tileUrlFunction: (tileCoord) => {
			let [z, x, y] = tileCoord;
			y = -1 - y;
			return `http://maponline0.bdimg.com/tile/?qt=vtile&x=${x}&y=${y}&z=${z}&styles=pl&udt=20210407`;
		}
	});

	const baidu = new ol.layer.Tile({
		source: baiduSource
	});

	const map = new ol.Map({
		target: 'map',
		layers: [baidu],
		view: new ol.View({
			// constrainResolution: true,
			center: ol.proj.transform([121.48918852071861, 31.23421977234498], 'EPSG:4326', 'baidu'),
			zoom: 5,
			projection: 'baidu',
			minZoom: 4,
			resolutions: bmercResolutions
		})
	});

	console.log(bmercResolutions, map.getView().getResolution(), map.getView().getZoom());

	/*const tileGrid = new ol.tilegrid.TileGrid({
        origin: [0, 0],
        resolutions: resolutions
    });

    const baiduSource = new ol.source.TileImage({
        projection: 'BD:09',
        tileGrid: tileGrid,
        tileUrlFunction: (tileCoord) => {
            let [z, x, y] = tileCoord;
            y = -1 - y;
            // y = -y - 1;
            // 百度瓦片服务url将负数使用M前缀来标识
            // return `http://shangetu1.map.bdimg.com/it/u=x=${x};y=${y};z=${z};v=009;type=sate&fm=46&udt=20210407`;
            return `http://maponline0.bdimg.com/tile/?qt=vtile&x=${x}&y=${y}&z=${z}&styles=pl&udt=20210407`;
            // return `http://maponline0.bdimg.com/tile/?qt=vtile&x=${x}&y=${y}&z=${z}&styles=sl&udt=20210407`;
        }
    });
    // 百度地图层
    const baiduMapLayer = new ol.layer.Tile({
        source: baiduSource
    });

    const centerPoint = [116.384722, 39.889916]; // 邢台 - [114.507435,37.074612] ; 北京 - [116.384722, 39.889916]

    const circlePoint = gcoord.transform(centerPoint, gcoord.WGS84, gcoord.BD09MC);//ol.proj.transform(centerPoint, 'EPSG:4326', 'BD:09');
    console.log(circlePoint);

    const iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(circlePoint)
    });

    const iconStyle = new ol.style.Style({
        image: new ol.style.Icon(
            /!** @type {olx.style.IconOptions} *!/ ({
                anchor: [10, 26],
                anchorXUnits: 'pixels',
                anchorYUnits: 'pixels',
                src: '../image/position_orange.png'
            })
        )
    });

    iconFeature.setStyle(iconStyle);

    const vectorSource = new ol.source.Vector({
        features: [iconFeature]
    });

    const iconLayer = new ol.layer.Vector({
        source: vectorSource
    });

    const map = new ol.Map({
        layers: [
            baiduMapLayer,
            iconLayer
        ],
        target: 'map',
        view: new ol.View({
            center: gcoord.transform(centerPoint, gcoord.WGS84, gcoord.BD09MC),
            projection: 'BD:09',
            zoom: 7,
            maxZoom: 18,
            minZoom: 5
            // resolutions
        })
    });

    map.addEventListener('moveend', (evt) => {
        const point = evt.target.getView().getCenter();
        const bd09Point = gcoord.transform(point, gcoord.BD09MC, gcoord.WGS84);
        console.log(point, bd09Point);
    });*/
</script>
</html>